<script setup>
// import { reactive } from 'vue';
import { ref, toRaw } from 'vue';
import { AlipayOutlined, TaobaoOutlined, WeiboOutlined, MobileOutlined, MailOutlined, UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { notification, message } from 'ant-design-vue';
import loginRegister from '@/components/loginRegister.vue';


const router = useRouter()

// 表单校验
const formRef = ref(null)
const formModel = ref({
  username: '',
  password: '',
  remember: true,
  phone: '',
  captcha: ''//验证码
});
const formRules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    }
  ],
  captcha: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    }
  ]
}
// 分段控制器
const switchData = ref(['账号密码登录', '手机号登录'])//选项
const regLog = ref(switchData.value[0])//当前选中的值

// 登录
// 发送验证码
const myCaptcha = ref()//验证码
const cutdown = ref(0)  // 倒计时
const totalSeconds = 60//倒计时总秒数
const getCaptcha = () => {
  myCaptcha.value = Math.floor(1000 + Math.random() * 2000) % 10000
  notification['success']({
    message: '提示',
    description:
      `验证码获取成功，您的验证码为：${myCaptcha.value}`,
  });
  cutdown.value = totalSeconds
  const timer = setInterval(() => {
    cutdown.value--
    if (cutdown.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
  // 发送提示
  const key = 'updatable';
  message.loading({
    content: '验证码发送中...',
    key,
  });
  setTimeout(() => {
    message.success({
      content: '发送成功!',
      key,
      duration: 2,
    });
  }, 1000);
}

const isErr = ref(false)//是否输错密码
const login = () => {
  formRef.value
    .validate()
    .then(() => {
      if (formModel.value.username === 'admin' && formModel.value.password === 'admin') {
        router.push('/')
        notification['success']({
          message: '欢迎',
          description:
            '晚上好，欢迎回来',
        });
        console.log('values', formModel, toRaw(formModel));
      } else {
        isErr.value = true
        notification['error']({
          message: '错误',
          description:
            '账户名或密码错误',
        });
        return
      }
    })
    .catch(error => {
      console.log('error', error);
    });
}

// 注册
const goRegister = () => {
  router.push({ path: '/register' })
}
</script>

<template>
  <loginRegister>
    <!-- 主体 -->
    <div class="main">
      <!-- 登录切换 (使用分段控制器完成)-->
      <div class="switch" style="text-align: center;margin-bottom: 15px;">
        <a-segmented v-model:value="regLog" :options="switchData" />
      </div>

      <!-- 登录错误处理 -->
      <a-alert message="账户或密码错误" type="error" show-icon style="margin-bottom: 20px;" v-if="isErr === true" />
      <!-- contextHolder -->

      <!-- 登录表单校验 -->
      <a-form :model="formModel" :rules="formRules" ref="formRef">
        <!-- 账号密码登录 -->
        <div v-if="regLog === switchData[0]">
          <a-form-item name="username">
            <a-input v-model:value="formModel.username" size="large" placeholder="账户：admin">
              <template #prefix>
                <UserOutlined class="preIcon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="password">
            <a-input-password v-model:value="formModel.password" size="large" placeholder="密码：admin"
              style="margin-bottom: 5px;">
              <template #prefix>
                <LockOutlined class="preIcon" />
              </template>
            </a-input-password>
          </a-form-item>
        </div>

        <!-- 手机号登录 -->
        <div v-else>
          <a-form-item name="phone">
            <a-input v-model:value="formModel.phone" size="large" placeholder="手机号">
              <template #prefix>
                <MobileOutlined class="preIcon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="captcha">
            <div style="display: flex; justify-content: space-between;">
              <a-input v-model:value="formModel.captcha" size="large" placeholder="验证码"
                style="margin-bottom: 12px;width:230px;">
                <template #prefix>
                  <MailOutlined class="preIcon" />
                </template>
              </a-input>
              <a-button style="width: 110px; font-size: 14px;" size="large" @click="getCaptcha"
                :disabled="cutdown > 0">{{
                  cutdown > 0 ? `${cutdown}s` : '获取验证码' }}
              </a-button>
            </div>
          </a-form-item>
        </div>

        <a-form-item name="remember">
          <div style="display: flex;justify-content: space-between;height: 40px;align-items: center">
            <!-- 套个span是为了让选择框和字在同一条直线上 -->
            <span>
              <a-checkbox v-model:checked="formModel.remember">自动登录</a-checkbox>
            </span>
            <a-button type="link">忘记密码</a-button>
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" style="width: 100%;" @click="login">登录</a-button>
        </a-form-item>
      </a-form>
      <div class="other" style="font-size: 14px;">
        <div>
          <span>其他登录方式</span>
          <a-button type="primary" shape="circle" size="small">
            <AlipayOutlined />
          </a-button>
          <a-button type="primary" shape="circle" size="small">
            <TaobaoOutlined />
          </a-button>
          <a-button type="primary" shape="circle" size="small">
            <WeiboOutlined />
          </a-button>
        </div>
        <a-button type="link" @click="goRegister">注册账户</a-button>
      </div>
    </div>

  </loginRegister>

</template>
<style scoped lang="less">
// 身
.main {
  margin-bottom: 48px;

  .switch {
    height: 45px;
    width: 100%;
  }

  .other {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ant-btn-circle {
      text-align: center;
      margin-left: 6px;
      background-color: rgb(192, 194, 196);

      &:hover {
        background-color: rgb(24, 144, 255);
      }
    }
  }

  .preIcon {
    color: rgb(207, 207, 207);
  }
}
</style>
